<template>
	<view class="app">
		<!-- 	<mypageHeader3 ref="pageHeader"></mypageHeader3> -->
		<view class="banner">
			<swiper :autoplay="true" :interval="3000" circular style="height:500rpx;" @change="toggle">
				<swiper-item class="item" v-for="(item,index) in banner" :key='index' @click="image(item)">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="dot">
				<view class="dot-item" v-for="(item,index) in data.lunboImg" :class="{active2:current==index}"
					:key='index'></view>
			</view>
		</view>
		<view class="introduce column">
			<text class="title">{{data.prodName}}</text>
			<view class="price-wrap row">
				<text>￥{{data.price}}</text>
				<!-- isPostage==0 免邮费 || 1 不免  -->
				<text v-if="isPostage==0" class="tag">免邮费</text>
			</view>
			<view class="tit row">
				<view class="icon image">
					<image class="img" src="../../static/shop/iconOk.png" mode=""></image>
				</view>
				<view class="span">
					可获得积分 {{data.price/10}}
				</view>
			</view>
		</view>
		<!--  分享 -->
		<!-- <button open-type="share">
			<view class="share-wrap row" >
				<view class="icon row">
					<text class="mix-icon icon-iconfontxingxing"></text>
					<text>分享</text>

				</view>
				<text class="tit">发给好友看看吧~</text>
				<text class="mix-icon icon-bangzhu1"></text>
			</view>
		</button> -->
		<view class="c-list">
			<view class="row b-b" @click="flag=true">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="attr">{{ sizetitle }}</text>
				</view>
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="row b-b">
				<text class="tit">优惠券</text>
				<text class="con red">领取优惠券</text>
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="row b-b">
				<text class="tit">服务</text>
				<view class="con">
					<text class="service">7天无理由退换货 ·</text>
					<text class="service">假一赔十 ·</text>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view id="rating" class="rating-wrap column" @click="navTo('/pages/comments/comments')">
			<view class="e-header">
				<text class="tit">商品评价</text>
				<text>({{ 0 }})</text>
				<text class="tip">好评率 {{ 100 }}%</text>
				<text class="mix-icon icon-you"></text>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header center">
				<text>图文详情</text>
			</view>
			<u-parse class="parse" :html="data.description"></u-parse>
		</view>
		<mySku v-model="flag" :infoData="Size" @setSize='setSize' :data='data'></mySku>
		<my-bottom v-model="flag"></my-bottom>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				data: {

				},
				loaded: true,
				banner: [

				],
				active2: "active2",
				current: 0,
				Size: '',
				sizetitle: '请选择规格',
				isPostage: 1

			}
		},
		async onShow() {

		},
		onLoad(e) {
			// console.log(option);
			// if (option.data) {
			// 	let id = +JSON.parse(option.data).id
			// }
			// this.getdata(3)
			// // 请求规格
			if (e.id) {
				console.log(e.id);
				this.getdata(e.id)
			}
			var that = this;
			that.$u.get("/p/address/list").then((res) => {
				uni.setStorageSync("addrInfo", res);
			});
			// this.getcart()

		},
		onPageScroll(e) {
			this.$refs.pageHeader && this.$refs.pageHeader.pageScroll(e);
		},
		methods: {
			
			// 推广二维码
			onShareAppMessage: function(res) {
				console.log(res.from);
				return {
					title: '分享',
					path: 'pages/detail/detail',
					success: function(res) {

					}
				}
			},
			toggle(e) {
				// console.log(e.detail.current)
				this.current = e.detail.current
			},
			// async getdata(id) {
			// 	let data = await this.$u.get('/api2/yxStoreProduct/' + 1)
			// 	console.log(this.data = data);
			// 	this.banner = data.imgs.split(",")
			// 	let res = await this.$u.get('/api2/yxStoreProduct/attr/' + id)
			// 	this.Size = JSON.parse(res.result)
			// 	console.log(this.Size);
			// 	this.data.description = this.rich(data.description)
			// 	console.log(this.data.description);
			// },
			async getdata(id) {
				let res = await this.$u.get('/prod/prodInfo?prodId='+id)
				this.data = res.data
				console.log(this.data,'数据')
				console.log(this.data.imgs,'照片轮播')
				console.log(this.data.pic,'照片轮播')
				this.banner = res.data.imgs.split(",")
				console.log(this.banner[0])
				// this.msg = res
				// this.imgs = res.imgs.split(",")
				// this.gui = res.skuList[0]
				// this.rich(this.msg.content)
				// console.log(this.imgs);
				// console.log(this.gui);
			},
			// 获取商品规格
			setSize(data) {
				console.log(1)
				this.sizetitle = data
			},
			// 查看图片详细
			image(item) {
				uni.previewImage({
					current: item, // 当前显示图片的http链接
					urls: this.banner // 需要预览的图片http链接列表
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang='scss'>
	.banner {
		position: relative;

		.item {
			width: 100%;
			height: 700rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.dot {
			position: absolute;
			bottom: 15rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.dot-item {
				width: 40rpx;
				height: 8rpx;
				background: #fff;
				margin: 5rpx;
				border-radius: 4rpx;
			}

			& .active2 {
				background: #ffce07;
			}
		}
	}

	.app {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&:after {
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}

	/* 标题简介 */
	.introduce {
		background: #fff;
		padding: 20rpx 30rpx;

		.title {
			min-height: 44rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
		}

		.price-wrap {
			min-height: 40rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}

		.m-price {
			margin-left: 10rpx;
			margin-right: 16rpx;
			color: #999;
			text-decoration: line-through;
		}

		.tag {
			transform: translateY(4rpx);
			padding: 0 10rpx;
			margin-left: 8rpx;
			background: #ff007f;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			border-radius: 4rpx;
			position: relative;
			bottom: 8rpx;
		}

		.bot {
			padding: 28rpx 0 10rpx 4rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 分享 */
	.share-wrap {
		background: linear-gradient(to right, #fdf5f6, #fbebf6);
		height: 76rpx;
		padding: 0 30rpx;
		color: #ff007f;

		.icon {
			width: 90rpx;
			height: 30rpx;
			border: 1px solid#ff007f;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;

			&:after {
				position: absolute;
				left: -20rpx;
				top: -12rpx;
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: #ff007f;
			}
		}

		.icon-iconfontxingxing {
			position: relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
		}

		.tit {
			flex: 1;
			font-size: 26rpx;
			color: #666;
			margin-left: 14rpx;
		}

		.icon-bangzhu1 {
			padding: 10rpx;
			font-size: 30rpx;
			display: none;
		}

		.btn {
			padding-left: 20rpx;
			font-size: 24rpx;
			color: #ff007f;
		}

		.icon-you {
			font-size: 22rpx;
			margin-left: 4rpx;
			color: #ff007f;
		}
	}

	.c-list {
		font-size: 26rpx;
		color: #888;
		background: #fff;

		.row {
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position: relative;

			&:after {
				border-color: #eaeaea;
			}

			&:last-child:after {
				border: 0;
			}
		}

		.tit {
			width: 140rpx;
		}

		.con {
			flex: 1;
			color: #333;

			.attr {
				margin-right: 10rpx;
			}

			.service {
				margin-right: 30rpx;

				&:last-child {
					margin: 0;
				}
			}
		}

		.con-list {
			color: #333;

			text {
				line-height: 40rpx;
			}
		}

		.red {
			color: #ff007f;
		}

		.icon-you {
			font-size: 24rpx;
			color: #999;
		}
	}

	.image {
		width: 40rpx;
		height: 40rpx;
	}

	.span {
		font-size: 24rpx;
		color: #999999;
	}

	/* 评价 */
	.rating-wrap {
		padding: 20rpx 30rpx 0rpx;
		background: #fff;
		margin-top: 12rpx;

		&.no-data {
			padding: 10rpx 30rpx 10rpx;
		}

		.e-header {
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: 28rpx;
			color: #333;
		}

		.tit {
			display: flex;
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
			margin-right: 4rpx;

		}

		.tip {
			flex: 1;
			font-size: 26rpx;
			color: #999;
			text-align: right;
		}

		.icon-you {
			margin-left: 8rpx;
			font-size: 24rpx;
			color: #999;
		}

		.mix-rating-item::after {
			border: 0;
		}
	}

	/*  详情 */
	.detail-desc {
		margin-top: 12rpx;
		background: #fff;

		.d-header {
			height: 80rpx;
			font-size: 30rpx;
			color: #333;

			text {
				margin: 0 20rpx;
			}

			&:before,
			&:after {
				content: '';
				width: 60rpx;
				border-bottom: 1px solid #ccc;
			}
		}
	}
</style>
